<template>
  <div id="gameHeaderPage" class="sec_top flex">
    <div class="left flex">
      <div class="item1"><img src="../../../../static/img/51.png" alt=""></div>
      <div class="item2">
        <div style="padding-bottom:8px;font-size: 17px ">{{ caipiaoName }}</div>
        <div style="padding-bottom:5px;font-size: 14px ">第{{ caipiaoTerm }}期</div>
        <div style="padding-bottom:8px;font-size: 14px ">走势分析</div>
      </div>
      <div class="item3">
        <div style="color: #d32036;text-align: center;padding-top: 10px">已开盘，距离投注截止还有：</div>
        <h1 style="padding-top: 40px;font-size: 40px" v-text="timeLeft"></h1>
      </div>
    </div>
    <div class="right">
      <el-tabs tab-position="right" style="height: 200px;">
        <el-tab-pane label="近一期">
          <div class="item1 flex">
          <span style="margin: 40px 30px">第20151512期</span>
          <span style="margin: 40px 40px">走势分析</span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="近五期">
          <ul>
            <li v-for="item in 5" class='flex'>
            <div>第 <span style="color:#1ca01c">2017063</span>期 </div>
              <div style="margin-left: 6px"><span v-for="item in 7" class="round">12</span></div>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import leftTimer from '../../../assets/leftTime/index'
  export default {
  	props: ['caipiaoTerm', 'caipiaoName'],
    data () {
      return {
        timeLeft: '截止时间正在加载...',
        setId: 1
      }
    },
    created () {
      let setIntervalId = setInterval(() => {
        this.timeLeft = leftTimer(2017, 12, 22, 21, 30, 11)
      }, 1000)
      this.setId = setIntervalId
    },
    computed: {
      gameHeaderInfo () {
        console.log(this.$store.state.gameHeaderInfo)
        return this.$store.state.gameHeaderInfo
      }
    },
    methods: {},
    destroyed () {
      clearInterval(this.setId)
    }
  }
</script>

<style lang="less">
  #gameHeaderPage{
    .left {
      width: 58%;
      border-right: 1px solid #ccc;
      padding: 30px 0;

      .item1 {
        width: 100px;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .item2 {
        padding-top: 15px;
        padding-left: 8px;
        width: 120px;
        text-align: left;
      }
      .item3 {
        flex: 1;
      }
    }
    .right {
      width: 42%;
      ul{
        padding: 15px 6px;
      }
      li{
        text-align: left;
        line-height: 35px;
      }
    }
    .el-tabs__item.is-active{
      background-color: #f13131;
      color: white;
    }
    .round{
      background-color: #f3f3f3;
      font-weight: bold;
    }
  }
</style>
